<template>
  <el-card class="weather-card">
    <h4><svg-icon name="weather" width="20" height="20"></svg-icon>天气</h4>

    <div id="he-plugin-standard"></div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
onMounted(() => {
  window.WIDGET = {
    CONFIG: {
      layout: "2",
      width: 200,
      height: 300,
      background: "2",
      dataColor: "000000",
      borderRadius: "5",
      key: "d1806c070b624982bb830ca9611a8e4c",
    },
  };
  const script = document.createElement("script");
  script.src =
    "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
  document.body.appendChild(script);
});
</script>
<style lang="scss" scoped>
:deep .el-card__body {
  padding: 0;
}
.weather-card {
  padding: 10px;
  margin-top: 20px;
  &:hover {
    box-shadow: 1px 1px 10px 5px $shadowcolor;
    h4 {
        background-size: 30% 4px;
    }
  }
  h4 {
    margin-bottom: 5px;
    display: flex;
    :deep svg {
      vertical-align: -4px;
      margin-right:5px;
    }
    padding-bottom: 10px;
    background-image:linear-gradient(0deg, #000,#000);
    background-repeat: no-repeat;
    background-size:10% 4px;
    background-position: left bottom;
    transition:background .5s ease-out;
  }


  :deep #he-plugin-standard {
    width:100%!important;
  }
}
</style>
